<template>
  <div class="analysis-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
    </Card>
    <Row :gutter="6" class="top-part">
      <Col span="12" style="height:100%">
          <Card v-if="!!barData">
            <starLine
              class="chart-item"
              :language="barLanguage"
              :data="barData"
              :config="barConfig"
            ></starLine>
          </Card>
         <noData v-else class="no-data"></noData>
      </Col>
      <Col span="12" style="height:100%">
         <Card v-if="!!pieData">
            <starPie
            class="chart-item"
            :language="pieLanguage"
            :data="pieData"
            :config="pieConfig"
          ></starPie>
         </Card>
         <noData v-else class="no-data"></noData>
      </Col>
    </Row>
    <Card v-if="!!lineData">
      <starLine class="line-chart chart-item"
      :config="lineConfig"
      :language="lineLanguage"
      :data="lineData"
    ></starLine>
    </Card>
   <noData v-else class="no-data line-no-data"></noData>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import noData from "../components/noData.vue";
export default {
  components: { TableSearch,noData },
  props: {
    queryFormItem: {
      default: () => []
    },
    collapseFormItem: {
      default: () => []
    },
    type: {
      default: ''
    }
  },
  data() {
    return {
      filter: {},
      labelWidth: 80,
      barLanguage: {
        "en-US": {
          headTitle: "monthly energy statistics",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源统计",
          title: "",
        },
      },
      barData: null,
      barConfig: {
        type: "bar",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: true,
        yAxisNameLocation: "end",
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        legend: true,
        grid: {
          bottom: 40,
        },
        showBackground: true,
      },
      pieConfig: {
        toolbox: false,
        legend: true,
        radius: ["20%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        label: true,
        labelLine: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
      },
      pieLanguage: {
        "en-US": {
          headTitle: "the proportion of energy in the current month",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          headTitle: "当月能源占比",
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      pieData: null,
      lineData: null,
      lineLanguage: {
        "en-US": {
          headTitle: "energy analysis for the current month",
          title: "",
        },
        "zh-CN": {
          headTitle: "当月能源分析",
          title: "",
        },
      },
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        grid: {
          bottom: 40,
        },
      },
    };
  },
  computed: {
     lang() {
       return {
         "en-US": {
           cancel: "cancel",
           confirmDelete: "confirm delete?",
         },
         "zh-CN": {
           cancel: "取消",
           confirmDelete: "确认删除？",
         },
       }[this.G_Locale];
     },
   },
  created() {
   //初次打开页面，默认当月并按天统计
   let curDate = this.tools.dayjs().format("YYYY-MM-DD");
   this.filter = {
      scale:'天',
      timeRange:[`${curDate} 00:00:00`,`${curDate} 23:59:59`],
   };
   this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.filter = {}
      let { timeRange, beginTime, endTime } = this.filter;
      if (!timeRange) {
        this.$Message.error("请选择时间区间");
        return;
      }
      if (!!timeRange && Array.isArray(timeRange)) {
        beginTime = timeRange[0];
        endTime = timeRange[1];
      }
      let params = { ...this.filter, beginTime, endTime };
      this.$api.Custom.energyAnalysis(params).then((res) => {
        if (!res) {
          return;
        }
        let { categories, values } = res;
       
        this.$set(this, "barData", {
          categories,
          values: this.transValues(values),
        });
        
        this.$set(this, "pieData", res.dataList);
        this.$set(this, "lineData", {
          categories,
          values: this.transValues(values),
        });
      });
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.analysis-page {
  padding-top: 10px;
  height: 100%;
  padding: 10px;
  .top-part{
   height: calc(40% - 30px);
  }
  .chart-item{
    // border: 1px solid #797979;
    // border-radius: 10px;
    height: 100%;
    padding-top: 10px;
  }
  .line-chart{
   margin-top: 10px;
   height: calc(60% - 60px);
  }
  .no-data{
    border: 1px solid #dfdfdf;
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
    padding-top: 40px;
  }
  .line-no-data{
   margin-top: 10px;
   height: calc(60% - 60px);
  }
}
.search-banner {
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
  p {
    text-align: center;
  }
}
</style>
